<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端培训第五期</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        .a {
            position: relative;
            width: 375px;
            height: 667px;
            background: #007aff;
            margin: auto;
        }
        .b {
            position: absolute;
            left: 10px;
            top: 10px;
            width: 100px;
            height: 100px;
            background: #00FF00;
            border-radius: 5px;
            border: 1px solid white;
            box-shadow: 2px 2px 2px #000000;
            z-index: 100;
        }
        .c {
            position: absolute;
            left: 40px;
            top: 40px;
            width: 100px;
            height: 100px;
            background: #ffff00;
            border-radius: 5px;
            border: 1px solid red;
            z-index: 50;
        }
        .d {
            position: absolute;
            left: 70px;
            top: 70px;
            width: 100px;
            height: 100px;
            background: #680200;
            border-radius: 5px;
            border: 1px solid black;
            z-index: 60;
        }
        .button1 {
            background: #FF0000;
            color: white;
        }
        .mask {
            position: absolute;
            z-index: 999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.5;/*元素透明度*/
        }
        /* 弹窗 */
        .alert {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 100px;
            background: blueviolet;
            z-index: 1000;
        }
        label {
            color: white;
        }
    </style>
    <!--<script type="text/javascript">-->
        <!--$(function () {-->
            <!--$(document).ready(function () {-->
                <!--$('.mask,.alert').hide();-->
            <!--});-->
            <!--$('.button1').click(function (text) {-->
                <!--$('.alert').show().find('label').html(text);-->
            <!--});-->
        <!--});-->
    <!--</script>-->
</head>
<body>
    <div class="a">
        <!--<div class="b"></div>-->
        <!--<div class="c"></div>-->
        <!--<div class="d"></div>-->
        <div class="mask"></div>
        <button class="button1" onclick="btn('按钮一')">按钮一</button>
        <button class="button1" onclick="btn('按钮二')">按钮二</button>
        <div class="alert">
            <label>你好</label>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $('.mask,.alert').hide();
    });
    $('.mask,.alert').click(function () {
        $('.mask,.alert').hide();
    });
    var btn = function (text) {
        $('.mask').show();
        $('.alert').show().find('label').html(text);
    }
</script>